<template>
    <Dialog :app-dialog="appDialog" @close="cancelHandel">
        <ZwTable
            ref="tableRef"
            class="table-box"
            tab-h="480px"
            :multiple="false"
            :option="tableOption"
            :fetch-params="state.searchParams"
            :row-key="getRowKey"
            :fetch-api="fetchApi()"
            @radioChange="radioChange">
        </ZwTable>
    </Dialog>
</template>

<script setup lang="tsx">
import { reactive, ref, watch } from 'vue';
import ZwTable from '@/components/zw/table/Table';
import Dialog from '@/components/Dialog.vue';
import { channelGroupList } from '@/api/channel/qwbase';
import { getSetionId, getSuffixIcon, IsNotEmpty, downFile, getVideoImage } from '@/utils/utils';
import { deepCopy } from '@/utils/helper';

const tableRef = ref();
const seleItem = ref(); // 选中的欢迎语数据

const defaultParams = {
    content: '',
    created_uids: [], //创建人id
    created_at: [] //创建时间
};

interface Props {
    modelValue: boolean;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: false
});

const state = reactive({
    searchParams: deepCopy(defaultParams)
});

// 表格
const tableOption = [
    {
        width: 55,
        fixed: 'left',
        isRadio: true
    },
    {
        prop: 'content',
        label: '欢迎语',
        minWidth: 300,
        showOverflowTooltip: true
    },

    {
        prop: 'content',
        label: '附件',
        minWidth: 250,
        render({ row }: any) {
            return (
                <div class="content_list">
                    {row.welcome_groupchat_attachment.map((v: any, key: any) => {
                        // 图片
                        if (v.type === 1) {
                            return (
                                <el-tooltip
                                    content={
                                        v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'
                                    }
                                    placement="top"
                                    effect="light">
                                    <el-image
                                        class="wel_content_file_item"
                                        src={v.media_file.absolute_url}
                                        preview-src-list={[v.media_file.absolute_url]}
                                        preview-teleported={true}
                                        initial-index={1}
                                        style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                                        {{
                                            error: () => (
                                                <img
                                                    style="width: 40px; height: 40px"
                                                    src="/static/file/pic.png"
                                                    alt=""
                                                />
                                            )
                                        }}
                                    </el-image>
                                </el-tooltip>
                            );
                        } else if (v.type === 2) {
                            return (
                                <el-tooltip content={v.media_file.name} placement="top" effect="light">
                                    <div
                                        class="pay-item"
                                        onClick={() => downLoad(v.media_file.absolute_url, v.media_file)}>
                                        <div class="play"></div>
                                        <el-image
                                            class="wel_content_file_item"
                                            src={
                                                getVideoImage(v.media_file.absolute_url, 50, 50) ||
                                                '/static/file/pic.png'
                                            }
                                            style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                                            {{
                                                error: () => (
                                                    <img
                                                        style="width: 40px; height: 40px"
                                                        src="/static/file/mov.png"
                                                        alt=""
                                                    />
                                                )
                                            }}
                                        </el-image>
                                    </div>
                                </el-tooltip>
                            );
                        } else if (v.type === 3) {
                            return (
                                <el-tooltip content={v.link_title || '暂无标题'} placement="top" effect="light">
                                    <div class="inlineblock">
                                        <img
                                            class="wel_content_file_item"
                                            src="/static/file/link.png"
                                            style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                        />
                                    </div>
                                </el-tooltip>
                            );
                        } else if (v.type === 4) {
                            return (
                                <el-tooltip
                                    content={
                                        v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'
                                    }
                                    placement="top"
                                    effect="light">
                                    <div class="inlineblock">
                                        <img
                                            class="wel_content_file_item"
                                            src="/static/file/mp3.png"
                                            onClick={() => downLoad(v.media_file.absolute_url, v.media_file)}
                                            style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                        />
                                    </div>
                                </el-tooltip>
                            );
                        } else if (v.type === 5) {
                            return (
                                <el-tooltip
                                    content={
                                        v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'
                                    }
                                    placement="top"
                                    effect="light">
                                    <div class="inlineblock">
                                        <img
                                            class="wel_content_file_item"
                                            src={getSuffixIcon(v.media_file.name)}
                                            onClick={() => downLoad(v.media_file.absolute_url, v.media_file)}
                                            style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                        />
                                    </div>
                                </el-tooltip>
                            );
                        } else if (v.type === 7) {
                            return (
                                <el-tooltip placement="top" effect="light" content={v.link_title}>
                                    <div class="inlineblock">
                                        {v.link_share_image && (
                                            <img
                                                class="wel_content_file_item"
                                                src={v.link_share_image}
                                                onClick={() =>
                                                    downLoad(v.link_share_image, v.retail_product.product_name)
                                                }
                                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                            />
                                        )}
                                        {!v.link_share_image && (
                                            <img
                                                class="wel_content_file_item"
                                                src="/static/file/shop.png"
                                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                            />
                                        )}
                                    </div>
                                </el-tooltip>
                            );
                        } else if (v.type === 8) {
                            return (
                                <el-tooltip placement="top" effect="light" content={v.link_title}>
                                    <div class="inlineblock">
                                        {v.type === 8 && (
                                            <img
                                                v-show={v.link_share_image}
                                                class="wel_content_file_item"
                                                src={v.link_share_image}
                                                onClick={() => downLoad(v.link_share_image, v.link_title)}
                                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                            />
                                        )}
                                        {v.type === 8 && (
                                            <img
                                                v-show={!v.link_share_image}
                                                class="wel_content_file_item"
                                                src="/static/file/shop.png"
                                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                            />
                                        )}
                                    </div>
                                </el-tooltip>
                            );
                        } else if (v.type === 9) {
                            return (
                                <el-tooltip placement="top" effect="light" content={v.link_title}>
                                    <div class="inlineblock">
                                        {v.link_share_imag ? (
                                            <img
                                                class="wel_content_file_item"
                                                src={v.link_share_imag}
                                                onClick={() => downLoad(v.link_share_imag, v.link_title)}
                                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                            />
                                        ) : (
                                            <img
                                                class="wel_content_file_item"
                                                src="/static/file/form.png"
                                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                            />
                                        )}
                                    </div>
                                </el-tooltip>
                            );
                        } else if (v.type === 10) {
                            return (
                                <el-tooltip placement="top" effect="light" content={v.link_title}>
                                    <div class="inlineblock">
                                        <img
                                            class="wel_content_file_item"
                                            src="/static/file/official.png"
                                            onClick={() => downLoad(v.link_share_image, v.link_title)}
                                            style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                        />
                                    </div>
                                </el-tooltip>
                            );
                        } else if (v.type === 11) {
                            return (
                                <el-tooltip placement="top" effect="light" content={v.mini_program.title}>
                                    <div class="inlineblock">
                                        <el-image
                                            class="wel_content_file_item"
                                            src={v.mini_program.image_url || '/static/file/pic.png'}
                                            onClick={() => downLoad(v.mini_program.image_url, v.mini_program.title)}
                                            style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                                            {{
                                                error: () => (
                                                    <img
                                                        style="width: 40px; height: 40px"
                                                        src="/static/file/miniApp.png"
                                                        alt=""
                                                    />
                                                )
                                            }}
                                        </el-image>
                                    </div>
                                </el-tooltip>
                            );
                        }
                    })}
                </div>
            );
        }
    },
    {
        prop: 'send_times',
        label: '消息数量',
        width: 100
    },
    {
        prop: 'user_name',
        label: '创建人',
        width: 120
    },
    {
        prop: 'user_local_department',
        label: '所在部门',
        width: 250,
        render({ row }: any) {
            return (
                <div>
                    {IsNotEmpty(row.user_local_department)
                        ? getSetionId('name', row.user_local_department).join('、')
                        : '--'}
                </div>
            );
        }
    },
    {
        prop: 'created_at',
        label: '创建时间',
        width: 170
    },
    {
        prop: 'updated_at',
        label: '修改时间',
        width: 170
    }
];

const emit = defineEmits(['update:modelValue', 'select']);

const getRowKey = (row: any) => {
    return row.id;
};
const fetchApi = () => {
    return channelGroupList;
};
const downLoad = (url: any, row?: any) => {
    downFile(url, row.name ? row.name : row);
};

const radioChange = (row: any) => {
    seleItem.value = row;
};

const cancelHandel = () => {
    emit('update:modelValue', false);
};

const submitHandel = () => {
    emit('select', seleItem.value);
    cancelHandel();
};

const appDialog = reactive({
    visible: false,
    title: '选择已有欢迎语',
    width: '1000px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存',
    isInit: false,
    isChooseDisabled: false,
    chooseArr: []
});

defineExpose({
    appDialog
});

watch(
    () => props.modelValue,
    val => {
        appDialog.visible = val;
    }
);
</script>

<style lang="scss" scoped>
:deep(.content_row) {
    display: flex;
    min-width: 220px;
    .content_text {
        overflow: hidden;
        text-overflow: ellipsis;
        width: auto;
        max-width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
    }
}
:deep(.content_text_all) {
    max-width: 300px;
    max-height: 200px;
}
:deep(.wel_content_file_item) {
    width: 40px;
    height: 40px;
    overflow: hidden;
}
:deep(.content_list) {
    display: flex;
    gap: 6px;
}
</style>
